<template>
    <div>
        <SuperTable ref="table" path="/common/platformAddress/index" :params="params" :columns="columns">
            <Button slot="header-left" type="primary" @click="showModal = true">新增地址</Button>
        </SuperTable>
        <Modal
            v-model="showModal"
            title="新增地址"
            :width="480"
            @on-cancel="handleCancel"
        >
            <Form ref="form" :model="form" :rules="rules" :label-width="80" style="padding-right: 40px;">
                <FormItem label="收货人" prop="name">
                    <Input v-model="form.name" />
                </FormItem>
                <FormItem label="联系电话" prop="phone">
                    <Input v-model="form.phone" />
                </FormItem>
                <FormItem label="所在地区" prop="area_id">
                    <AreaCascader v-model="form.area_id"></AreaCascader>
                </FormItem>
                <FormItem label="详细地址" prop="address">
                    <Input v-model="form.address" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="handleCancel">取消</Button>
                <Button type="primary" :loading="submiting" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import AreaCascader from "@/components/form/area-cascader.vue";
export default {
    components: {
        SuperTable,
        AreaCascader
    },
    data() {
        return {
            submiting: false,
            showModal: false,
            params: {
                page: 1,
                pageSize: 20
            },
            form: {
                id: '',
                name: '',
                phone: '',
                area_id: [],
                address: '',
            },
            rules: {
                name: [
                    {required: true, message: '请输入收货人', trigger: 'blur'}
                ],
                phone: [
                    {required: true, message: '请输入联系电话', trigger: 'blur'}
                ],
                area_id: [
                    {required: true, type: 'array', message: "请选择所在地区", trigger: "change"}
                ],
                address: [
                    {required: true, message: '请输入详细地址', trigger: 'blur'}
                ],
            },
            columns: [
                {
                    title: '收货人',
                    key: 'name'
                },
                {
                    title: '联系电话',
                    key: 'phone'
                },
                {
                    title: '所在地区',
                    key: 'area_titles'
                },
                {
                    title: '详细地址',
                    key: 'address'
                },
                {
                    title: '创建时间',
                    key: 'created_at'
                },
                {
                    title: '操作',
                    width: 160,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                on: {
                                    click: () => {
                                        this.form.id = params.row.id;
                                        this.form.name = params.row.name;
                                        this.form.phone = params.row.phone;
                                        this.form.area_id = params.row.area_ids.map(item => {
                                            return Number(item);
                                        });
                                        this.form.address = params.row.address;
                                        this.showModal = true;
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                style: {
                                    marginLeft: '5px'
                                },
                                props: {
                                    type: 'error',
                                    size: 'small',
                                },
                                on: {
                                    click: () => {
                                        this.handleDelete(params.row);
                                    }
                                }
                            }, '删除')
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        handleSubmit() {
            if(this.submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    const { form } = this;
                    let params = {
                        name: form.name,
                        phone: form.phone,
                        area_id: form.area_id[form.area_id.length - 1],
                        address: form.address,
                    }
                    this.submiting = true;
                    if (form.id) {
                        this.$ajax.put('/common/platformAddress/update/'+form.id, params).then(res => {
                            this.$Message.success('编辑成功');
                            this.handleCancel();
                            this.$refs.table.reload();
                            this.submiting = false;
                        }).catch(err => {
                            this.submiting = false;
                            this.$Message.error(err.message || '提交失败');
                        })
                    }else{
                        this.$ajax.post('/common/platformAddress/save', params).then(res => {
                            this.$Message.success('添加成功');
                            this.handleCancel();
                            this.$refs.table.init();
                            this.submiting = false;
                        }).catch(err => {
                            this.submiting = false;
                            this.$Message.error(err.message || '提交失败');
                        })
                    }
                }
            })
        },
        handleDelete(row) {
            this.$Modal.confirm({
                title: "操作提示:",
                content: `<p>您确定要删除此地址吗?</p>`,
                onOk: () => {
                    const msg = this.$Message.loading({
                        content: '正在提交删除',
                        duration: 0
                    });
                    this.$ajax.delete('/common/platformAddress/delete', {params: {ids: [row.id]}}).then(() => {
                        msg();
                        this.$Message.success('删除成功');
                        this.$refs.table.reload();
                    }).catch(err => {
                        msg();
                        this.$Message.error(err.message || '删除失败');
                    })
                }
            });
        },
        handleCancel() {
            this.showModal = false;
            setTimeout(() => {
                this.form.id = '';
                this.form.name = '';
                this.form.phone = '';
                this.form.area_id = [];
                this.form.address = '';
            }, 300)
        }
    }
}
</script>